<template>
  <div class="c-header">
    <div class="main-layer logo-div">
      <img src="@/assets/images/logo.png" alt="" class="logo-left" />
      <img src="@/assets/images/logo-2.png" alt="" />
    </div>
    <div class="nav">
      <div class="main-layer nav-list">
        <div class="left">
          <c-nav></c-nav>
        </div>
        <div class="user">
          <c-user></c-user>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Base from "@/controllers/base.ts";
import { Component } from "vue-property-decorator";
import { Popover } from "ant-design-vue";
import CUser from "./CUser.vue";
import CNav from "./CNav/index.vue";

@Component({
  name: "CHeader",
  components: {
    CUser,
    CNav,
    APopover: Popover
  }
})
export default class CHeader extends Base {
  private created() {
    // undo
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/style/mixin.less";
.c-header {
  background-color: white;
  .logo-div {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .scale(height, 95px);

    .logo-left {
      margin: 5px 0;
    }
    img {
      height: 100%;
    }
  }

  .nav {
    background: linear-gradient(0deg, #4a9ce9 0%, #56a7f0 100%);
  }

  .nav-list {
    display: flex;
    justify-content: space-between;
    .left {
      color: white;
    }
  }
}
</style>
